<template>
  <div>
   
   <!-- 动态绑定 class -->
   <!-- key 是类名 -->
   <!-- 值是一个布尔值 : true 类名添加  false 类名不添加 -->
  <div class="myDiv" :class="{active : isAct}">123</div>
  <div :class=" isAct ? 'active': '' ">456</div>
  <!-- <div :class="active">789</div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAct: false
    }
  },

  methods: {}
}
</script>

<style scoped>
.active {
  color: #8df;
}
.myDiv {
  font-size: 30px;
  background: green;
}
</style>
